// flex 布局
.flex {
  &-wrap{flex-wrap: wrap}
  &-nowrap{flex-wrap: nowrap}
  &-wrap-reverse{flex-wrap: wrap-reverse}

  &-row{flex-direction: row;}
  &-row-reverse{flex-direction: row-reverse;}
  &-col{flex-direction: column;}
  &-col-reverse{flex-direction: column-reverse;}

  &-1 {flex: 1 1 0;}
  &-auto {flex: 1 1 auto;}
  &-initial {flex: 0 1 auto;}
  &-none {flex: none;}
  &-grow-0 {flex-grow: 0;}
  &-grow {flex-grow: 1;}
  &-shrink-0 {flex-shrink: 0;}
  &-shrink {flex-shrink: 0;}
}
.justify {
  &-end {justify-content: flex-end;}
  &-start {justify-content: flex-start;}
  &-center{justify-content: center;}
  &-between {justify-content: space-between;}
  &-around {justify-content: space-around;}
  &-evenly{justify-content: space-evenly;}

  &-items{
    &-start{justify-items: start;}
    &-end{justify-items: end;}
    &-center{justify-items: center;}
    &-stretch{justify-items: stretch;}
  }
  &-self{
    &-auto{justify-self: auto;}
    &-start{justify-self: start;}
    &-end{justify-self: end;}
    &-center{justify-self: center;}
    &-stretch{justify-self: stretch;}
  }
}
.content{
  &-center{align-content: center;}
  &-start{align-content: flex-start;}
  &-end{align-content: flex-end;}
  &-between{align-content: space-between;}
  &-around{align-content: space-around;}
  &-evenly{align-content: space-evenly;}
}
.items{
  &-start{align-items: flex-start;}
  &-end{align-items: flex-end;}
  &-center{align-items: center;}
  &-baseline{align-items: baseline;}
  &-stretch{align-items: stretch;}
}
.self{
  &-auto{align-self: auto;}
  &-start{align-self: flex-start;}
  &-end{align-self: flex-end;}
  &-center{align-self: center;}
  &-stretch{align-self: stretch;}
  &-baseline{align-self: baseline;}
}
@for $i from 1 through 12 {
  .order-#{$i} {
    order: $i;
  }
}
.order-first{
  order: -9999;
}
.order-last{
  order: 9999;
}
